<script setup lang="ts">
import { ref, watch } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useEcharts } from '@/hooks/common/echarts';
import { basicmodelequipment } from '@/service/api';
defineOptions({
  name: 'PieChart'
});

const appStore = useAppStore();
const pieData = ref([]);
const loading = ref(false);

const { domRef, updateOptions } = useEcharts(
  () => ({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '1%',
      left: 'center',
      itemStyle: {
        borderWidth: 0
      }
    },
    series: [
      {
        // color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
        name: '报表信息',
        type: 'pie',
        radius: ['45%', '75%'],
        avoidLabelOverlap: false,
        center: ['50%', '37%'], // 将饼图的中心位置往上移动
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 1
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '12'
          }
        },
        labelLine: {
          show: false
        },
        data: [] as { name: string; value: number }[]
      }
    ]
  }),
  false
);

function getData() {
  loading.value = true;
  basicmodelequipment()
    .then(({ error, data }) => {
      if (!error) {
        Object.entries(data).forEach(([key, value]) => {
          pieData.value.push({ name: key, value });
        });
        updateOptions(opts => {
          opts.series[0].data = pieData.value;

          return opts;
        });
      }
    })
    .finally(() => (loading.value = false));
}
getData();
</script>

<template>
  <ACard :bordered="false" class="card-wrapper">
    <ASpin tip="数据加载中..." :spinning="loading">
      <div ref="domRef" class="h-360px overflow-hidden"></div>
    </ASpin>
  </ACard>
</template>

<style scoped></style>
